<template>
  <div ref="refContainer" class="s-item">
    <div class="line" :class="{ hide: last }" />
    <div class="content" :style="containerStyle">
      <div ref="refDelete" class="delete-btn-wrapper" @click="handleDelete">
        <div class="delete-btn">{{ delConfirm ? '确认删除' : '删除' }}</div>
      </div>
      <div v-if="!item.fake" ref="refContent" class="content-text" @click="handleItemClick">
        {{ item.content }}
      </div>
      <div v-else class="content-text" style="text-align: center">
        <img src="./no-schedule.png" style="width: 22.5px; height: 22.5px" />
        <div style="font-size: 13px; color: #00000066; line-height: 1">暂无日程</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useSwipe } from '@vueuse/core'
import type { UseSwipeDirection } from '@vueuse/core'
import { useElementSize, onClickOutside } from '@vueuse/core'

const props = defineProps<{
  item: any
  last: boolean
}>()

const emit = defineEmits(['delete', 'click'])

const handleItemClick = () => {
  emit('click', props.item)
}
const refContent = ref<HTMLElement | null>(null)
const refContainer = ref<HTMLElement | null>(null)
const refDelete = ref<HTMLElement | null>(null)
const delConfirm = ref(false)
const { width: deleteBtnWidth } = useElementSize(refDelete)

const isDeleteMode = ref<boolean>(false)
const offset = ref<number>(0)

onClickOutside(refContainer, event => {
  isDeleteMode.value = false
  offset.value = 0
})

const handleDelete = () => {
  if (!delConfirm.value) {
    delConfirm.value = true
  } else {
    emit('delete', props.item)
  }
}

const containerStyle = computed(() => {
  return {
    // left:
    transform: `translateX(-${offset.value}px)`
  }
})

const { direction, lengthX } = useSwipe(refContent, {
  onSwipe(e: TouchEvent) {
    if (direction.value != 'left') {
      isDeleteMode.value = false
      delConfirm.value = false
      offset.value = 0
      return
    } else if (isDeleteMode.value) {
      return
    } else if (lengthX.value > deleteBtnWidth.value) {
      offset.value = deleteBtnWidth.value
      return
    } else {
      offset.value = lengthX.value
    }
  },
  onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
    if (lengthX.value > deleteBtnWidth.value) {
      isDeleteMode.value = true
    } else {
      isDeleteMode.value = false
      offset.value = 0
    }
  }
})
</script>

<style lang="less" scoped>
.s-item {
  display: flex;
  //   padding-bottom: 10px;
  .line {
    flex-shrink: 0;
    width: 18px;
    margin-left: 6px;
    border-left: 1px dashed #d9d9d9;

    &.hide {
      border-left: none;
    }
  }
  .content {
    position: relative;
    transition: all 100ms linear;
    flex-grow: 1;
    .content-text {
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0px 2px 7.5px 0px #3a75c519;
      font-weight: medium;
      font-size: 14px;
      line-height: 25px;
      padding: 10px;
      margin-bottom: 10px;
      word-break: break-all;
      white-space: pre-line;
    }

    .delete-btn-wrapper {
      //   padding: 0px 0px 0px 8px;
      position: absolute;
      top: 0;
      width: 80px;
      right: -88px;
      height: 100%;
      padding-bottom: 10px;
      box-sizing: border-box;

      .delete-btn {
        height: 100%;
        width: 72px;
        background-color: #fa5252;
        color: #fff;
        border-radius: 8px;
        text-align: center;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
